<template>
  <div class="key-group" :style="computeKeyGroupStyle()">
    <div class="key"></div>

    <div
      class="key key-w"
      v-for="k in wkeys"
      :key="k.id"
      :style="computeKeyStyle(k)"
      :title="computeKeyTitle(k)"
    ></div>

    <div
      class="key key-b"
      v-for="k in bkeys"
      :key="k.id"
      :style="computeKeyStyle(k)"
      :title="computeKeyTitle(k)"
    ></div>
  </div>
</template>

<script>
export default {
  name: "PianoKey12",

  props: {
    whiteKeyW: Number,
    whiteKeyH: Number,
    baseCode: Number, // 本组第一个键(C) 的 midi 编码
  },

  data() {
    const wkeys = [];
    const bkeys = [];
    this.initWKeys(wkeys);
    this.initBKeys(bkeys);
    return {
      wkeys,
      bkeys,
    };
  },

  computed: {
    the128keys() {
      return this.$store.getters["keyboard/keys"];
    },
  },

  methods: {
    initBKeys(keys) {
      const count = 12;
      let bkw = (this.whiteKeyW * 7) / 12; // 黑键宽度
      let bkh = this.whiteKeyH * 0.5; // 黑键高度
      for (var i = 0; i < count; i++) {
        let k = {
          x: i * bkw,
          y: 0,
          w: bkw,
          h: bkh,
        };
        k.id = "bk" + i;
        k.code = this.baseCode + i;
        keys.push(k);
      }
      const hide = true;
      const down = true;
      this.initKey(keys[0], { hide });
      this.initKey(keys[1], { name: "C#" });
      this.initKey(keys[2], { hide });
      this.initKey(keys[3], { name: "D#", down });
      this.initKey(keys[4], { hide });
      this.initKey(keys[5], { hide });
      this.initKey(keys[6], { name: "F#", down });
      this.initKey(keys[7], { hide });
      this.initKey(keys[8], { name: "G#" });
      this.initKey(keys[9], { hide });
      this.initKey(keys[10], { name: "A#" });
      this.initKey(keys[11], { hide });
    },

    initWKeys(keys) {
      const count = 7;
      let wkw = this.whiteKeyW; // 白键宽度
      let wkh = this.whiteKeyH; // 白键高度
      for (var i = 0; i < count; i++) {
        let k = {
          x: wkw * i,
          y: 0,
          w: wkw,
          h: wkh,
        };
        k.id = "wk" + i;
        keys.push(k);
      }
      // const down = true;
      let c0 = this.baseCode;
      this.initKey(keys[0], { name: "C", code: c0 });
      this.initKey(keys[1], { name: "D", code: c0 + 2 });
      this.initKey(keys[2], { name: "E", code: c0 + 4 });
      this.initKey(keys[3], { name: "F", code: c0 + 5 });
      this.initKey(keys[4], { name: "G", code: c0 + 7 });
      this.initKey(keys[5], { name: "A", code: c0 + 9 });
      this.initKey(keys[6], { name: "B", code: c0 + 11 });
    },

    initKey(k, initProps) {
      if (k == null) {
        return;
      }
      let src = initProps;
      let dst = k;
      for (var name in src) {
        let value = src[name];
        dst[name] = value;
      }
    },

    computeKeyGroupStyle() {
      let top = this.numInt(0) + "px";
      let left = this.numInt(0) + "px";
      let width = this.numInt(this.whiteKeyW * 7) + "px";
      let height = this.numInt(this.whiteKeyH) + "px";
      let s = { top, left, width, height };
      return s;
    },

    computeKeyStyle(item) {
      let top = this.numInt(item.y) + "px";
      let left = this.numInt(item.x) + "px";
      let width = this.numInt(item.w) + "px";
      let height = this.numInt(item.h) + "px";
      let s = { top, left, width, height };
      if (item.hide) {
        s.display = "none";
      }
      if (this.isKeyDown(item.code)) {
        s["background-color"] = "red";
      }
      return s;
    },

    isKeyDown(code) {
      let list = this.the128keys;
      let item = list[code];
      if (item == null) {
        return false;
      }
      let down = item.down;
      if (down) {
        return true;
      }
      return false;
    },

    computeKeyTitle(item) {
      let p1 = item.name;
      let p2 = item.code;
      return p1 + " (" + p2 + ")";
    },

    numInt(n) {
      if (n == null) {
        return 0;
      }
      n = Number(n);
      return Math.floor(n);
    },
  },
};
</script>

<style scoped>
.key-group {
  /* display: inline-block; */
  position: relative;

  border-width: 2px;
  border-color: red;
  border-style: none;
}

.key {
  border-width: 1px;
  display: inline-block;
  position: absolute;

  border-width: 1px;
  border-color: black;
  border-style: solid;
}

.key-w {
  background-color: white;
}

.key-b {
  background-color: black;
}
</style>

